<!--
 * @Author: zxh
 * @Email: 1271027008@qq.com
 * @Date: 2020-05-26 09:22:19
 * @Descripttion: 
--> 
<template>
  <div id="chart_page">
    <el-row :gutter="20">
      <el-col v-if="userType == 3 || userType == 4 || userType == 6" class="left-company" :span="4">
        <div class="all-client">所有客户</div>
        <ul class="company">
          <li
            class="company-item"
            v-for="(item,index) in companyList"
            :key="index"
            @click="chooseCompany(item.deptId)"
            :class="{'active':isActive==item.deptId}"
          >{{item.companyName}}</li>
        </ul>
      </el-col>
      <el-col class="right-content" :span="this.userType == 3 || this.userType == 4 || this.userType == 6 ? 20 : 24">
        <!-- 右边组件1 -->
        <div class="content-item">
          <span style="padding-left:20px;font-size:12px;color:#999">企业名称</span>
          <h2 class="company-name">{{companyData1.title}}</h2>
          <el-row class="top-message">
            <el-col class="top-item" :span="5">
              户号数量:
              <span class="detail-message">{{companyData1.doorCount}}</span>
            </el-col>
            <el-col class="top-item" :span="5">
              负责人:
              <span class="detail-message">{{companyData1.people}}</span>
            </el-col>
            <el-col class="top-item" :span="5">
              手机号:
              <span class="detail-message">{{companyData1.phone}}</span>
            </el-col>
            <el-col class="top-item" :span="5">
              区域:
              <span class="detail-message">{{companyData1.area}}</span>
            </el-col>
          </el-row>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 基本信息 -->
            <el-tab-pane class="base-message" label="基本信息" name="one">
                <div class="base-content">
                    <div class="line"></div>
                    <div class="company-info">
                        <el-row>
                          <el-col>
                            <div class="info-item">
                              <span style="float:left; text-align:right; padding-right:10px; height:32px; line-height:32px;">企业名称:</span>
                              <div style="float:left">
                                <el-input v-model="companyBaseName" placeholder="请输入企业名称" :disabled="true"></el-input>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                        <!-- <el-row>
                          <el-col>
                            <div class="info-item">
                              <span style="float:left; text-align:right; padding-right:10px; height:32px; line-height:32px;">电压等级:</span>
                              <div style="float:left">
                                <el-input v-model="companyBaseVoltageLeavel" placeholder="请输入电压等级"></el-input>
                              </div>
                            </div>
                          </el-col>
                        </el-row> -->
                        <el-row>
                          <el-col>
                            <div class="info-item">
                              <span style="float:left; text-align:right; padding-right:10px; height:32px; line-height:32px;">联系人:</span>
                              <div style="float:left">
                                <el-input v-model="companyBaseContacts" placeholder="请输入联系人"></el-input>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <div class="info-item">
                              <span style="float:left; text-align:right; padding-right:10px; height:32px; line-height:32px;">手机号码:</span>
                              <div style="float:left">
                                <el-input v-model="companyBasePhone" placeholder="请输入电话号码"></el-input>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <div class="info-item">
                              <span style="float:left; text-align:right; padding-right:10px;; height:32px; line-height:32px;">开户行信息:</span>
                              <div style="float:left">
                                <el-image :src="companyBaseOpeningBank" fit="scale-down" class="img">
                                  <div slot="error" class="el-image__error">
                                    请上传图片
                                  </div>
                                </el-image>
                                <el-upload :action="updateFileUrl" name="imagefile" :show-file-list="false" :headers="headerToken" :on-success="bankHandleSuccess">
                                  <el-button size="small" type="primary" class="upload_btn">点击上传</el-button>
                                </el-upload>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <div class="info-item">
                              <span style="float:left; text-align:right; padding-right:10px;">法人身份证:</span>
                              <div style="float:left">
                                <div style="width:150px; float:left">
                                  <el-image :src="companyBaseIdCardFront" fit="scale-down" class="img">
                                    <div slot="error" class="el-image__error">
                                      请上传图片
                                    </div>
                                  </el-image>
                                  <el-upload :action="updateFileUrl" name="imagefile" :show-file-list="false" :headers="headerToken" :on-success="cardFrontSuccess">
                                    <el-button size="small" type="primary" class="upload_btn">点击上传</el-button>
                                  </el-upload>
                                </div>
                                <div style="width:150px; float:left">
                                  <el-image :src="companyBaseIdCardReverse" fit="scale-down" class="img">
                                    <div slot="error" class="el-image__error">
                                      请上传图片
                                    </div>
                                  </el-image>
                                  <el-upload :action="updateFileUrl" name="imagefile" :show-file-list="false" :headers="headerToken" :on-success="cardReverseSuccess">
                                    <el-button size="small" type="primary" class="upload_btn">点击上传</el-button>
                                  </el-upload>
                                </div>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <div class="info-item">
                              <span style="float:left; text-align:right; padding-right:10px;">营业执照:</span>
                              <div style="float:left"> 
                                <el-image :src="companyBaseBusinessLicense" fit="scale-down" class="img">
                                  <div slot="error" class="el-image__error">
                                    请上传图片
                                  </div>
                                </el-image>
                                <el-upload :action="updateFileUrl" name="imagefile" :show-file-list="false" :headers="headerToken" :on-success="licenseHandleSuccess">
                                  <el-button size="small" type="primary" class="upload_btn">点击上传</el-button>
                                </el-upload>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <div class="info-item">
                              <el-button type="primary" size="small" class="margin-left-100" @click="submitCompanyBase">保存</el-button>
                            </div>
                          </el-col>
                        </el-row>
                    </div>
                </div>
            </el-tab-pane>
            <!-- 小程序账号 -->
            <!-- <el-tab-pane v-if="userType == 1 || userType == 5" class="mini-program" label="账号发放" name="two">
              <el-row>
                <el-button type="primary" size="small" @click="addHousehold">添加小程序账号</el-button>
              </el-row>
              <el-table
                class="mini-table"
                :data="companyData1.programMessage"
                style="width: 98%"
              >
                <el-table-column prop="username" label="姓名"></el-table-column>
                <el-table-column prop="jobName" label="职务"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="wxId" label="微信ID"></el-table-column>
                <el-table-column prop="enabled" label="小程序">
                  <template #default="o">
                    <span v-if="o.row.enabled===true">开通</span>
                    <span v-else>未开通</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="editMiniUser(scope.row)">编辑</el-button>
                  <el-button type="text" size="mini" @click="delMiniUser(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog title="小程序账号信息" :visible.sync="dialogFormVisible1" width="20%">
                <el-form :model="programForm" ref="programForm" label-width="100px">
                  <el-form-item label="姓名" prop="username" style='max-width: 300px' :rules="[{ required: true, message: '请输入姓名', trigger: 'blur'}]">
                    <el-input v-model="programForm.username"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone" style='max-width: 300px' :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
                    <el-input v-model="programForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="职责" prop="jobId">
                    <el-select v-model="programForm.jobId" placeholder="请选择">
                      <el-option
                        v-for="item in jobList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="小程序" prop="enabled">
                    <el-select v-model="programForm.enabled" placeholder="请选择">
                      <el-option 
                        v-for="item in enabledList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                  <el-button type="info" @click="addProgramAccount('programForm')">确 定</el-button>
                </div>
              </el-dialog>
            </el-tab-pane> -->
            <!-- 户号信息 -->
            <el-tab-pane class="user-message" label="户号信息" name="three">
              <el-row>
                <el-button type="primary" size="small" @click="addMiniUser">添加户号</el-button>
              </el-row>
              <!-- 户号信息表格 -->
              <el-table class="mini-table" :data="companyData1.userMessage" style="width: 98%">
                <el-table-column prop="householdNumber" label="户号编号"></el-table-column>
                <el-table-column prop="electricityTypeText" label="用电类型"></el-table-column>
                <el-table-column prop="voltageLevelText" label="电压等级"></el-table-column>.
                <el-table-column label="操作">
                  <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="editHousehold(scope.row)">编辑</el-button>
                  <el-button type="text" size="mini" @click="delHousehold(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 编辑户号弹框 -->
              <el-dialog title="户号信息" :visible.sync="dialogFormVisible2" width="20%">
                <el-form :model="userForm" ref="userForm" label-width="100px">
                  <el-form-item label="户号编号" prop="householdNumber" style='max-width: 300px' :rules="[{ required: true, message: '请输入户号', trigger: 'blur'}]">
                    <el-input v-model="userForm.householdNumber" ></el-input>
                  </el-form-item>
                  <el-form-item label="用电类型" prop="electricityType" :rules="[{ required: true, message: '请选择用电类型', trigger: 'blur' }]">
                    <el-select v-model="userForm.electricityType" placeholder="请选择用电类型">
                      <el-option
                        v-for="item in userTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="电压等级" prop="voltageLevel">
                    <el-select v-model="userForm.voltageLevel" placeholder="请选择电压等级">
                      <el-option
                        v-for="item in voltageLevelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                  <el-button type="info" @click="addUserAccount('userForm')">确 定</el-button>
                </div>
              </el-dialog>
            </el-tab-pane>
            <!-- 合同管理 -->
            <el-tab-pane class="contact-message" label="合同管理" name="four">暂无数据</el-tab-pane>
            <!-- 变压器管理 -->
            <el-tab-pane class="transformer-message" label="变压器管理" name="five">
              <el-row>
                <el-button type="primary" size="small" @click="editTransformer('')">添加变压器</el-button>
              </el-row>
              <!-- 户号信息表格 -->
              <el-table class="mini-table" :data="companyData1.transformerMessage" style="width: 98%">
                <el-table-column prop="transformerName" label="变压器名称"></el-table-column>
                <el-table-column prop="transformerNumber" label="变压器编号"></el-table-column>
                <el-table-column prop="transformerCapacity" label="变压器容量（KVA）"></el-table-column>
                <el-table-column label="操作"> 
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="editTransformer(scope.row)">编辑</el-button>
                    <el-button type="text" size="mini" @click="delTransformer(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 添加变压器弹框 -->
              <el-dialog title="变压器信息" :visible.sync="dialogFormVisible3" width="20%">
                <el-form :model="transformerForm" ref="transformerForm" label-width="100px">
                  <el-form-item label="变压器名称" prop="transformerName" :rules="[{ required: true, message: '请输入变压器名称', trigger: 'blur'}]">
                    <el-input v-model="transformerForm.transformerName" placeholder="请输入变压器名称"></el-input>
                  </el-form-item>
                  <el-form-item label="变压器编号" prop="transformerNumber" :rules="[{ required: true, message: '请输入变压编号', trigger: 'blur'}]">
                    <el-input v-model="transformerForm.transformerNumber" placeholder="请输入变压编号"></el-input>
                  </el-form-item>
                  <el-form-item label="变压器容量" prop="transformerCapacity" :rules="[{ required: true, message: '请输入变压容量', trigger: 'blur'}]">
                    <el-input-number  v-model="transformerForm.transformerCapacity" controls-position="right" placeholder="请选择变压器容量KVA"></el-input-number> KVA
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                  <el-button type="info" @click="addTransformerAccount('transformerForm')">确 定</el-button>
                </div>
              </el-dialog>
            </el-tab-pane>
            <!-- 采集设备 -->
            <el-tab-pane class="device-message" label="采集设备" name="six">
              <el-row>
                <el-button type="primary" size="small" @click="addEquipment">添加终端设备</el-button>
              </el-row>
              <!-- 采集设备表格 -->
              <el-table
                class="mini-table"
                :data="companyData1.deviceMessage"
                style="width: 98%"
              >
                <el-table-column prop="equipmentNumber" label="终端编号"></el-table-column>
                <el-table-column prop="householdNumber" label="所属户号"></el-table-column>
                <el-table-column label="采集记录">
                  <!-- <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="realTimeDataClick(scope.row)">跳转至实时数据页面</el-button>
                    <el-link href="/electricitysales/realTimeData">跳转至实时数据页面</el-link>
                  </template> -->
                  <template slot-scope="scope">
                    <a v-if="userType == 1 || userType == 5" href="/#/electricitysales/realTimeManage">跳转至实时数据页面</a>
                    <a v-else :href="`/#/electricitysales/realTimeData?deptId=${scope.row.deptId}`">跳转至实时数据页面</a>
                    <!-- <router-link :to="{path:'/electricitysales/realTimeData',query: {deptId: scope.row.deptId}}"> -->
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="editEquipment(scope.row)">编辑</el-button>
                  <el-button type="text" size="mini" @click="delEquipment(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 添加采集设备 -->
              <el-dialog title="终端设备信息" :visible.sync="dialogFormVisible4" width="20%">
                <el-form :model="deviceForm" ref="deviceForm" label-width="100px">
                  <el-form-item label="电表编号" prop="equipmentId" style='max-width: 300px' :rules="[{ required: true, message: '请输入电表编号', trigger: 'blur'}]">
                    <el-input v-model="deviceForm.equipmentId" placeholder="请输入电表编号"></el-input>
                  </el-form-item>
                  <el-form-item label="期初值" prop="defaultValue" style='max-width: 300px' :rules="[{ required: true, message: '请输入期初值', trigger: 'blur'}]">
                    <el-input v-model="deviceForm.defaultValue" placeholder="请输入期初值"></el-input>
                  </el-form-item>
                  <el-form-item label="终端编号" prop="equipmentNumber" style='max-width: 300px' :rules="[{ required: true, message: '请输入终端编号', trigger: 'blur'}]">
                    <el-input v-model="deviceForm.equipmentNumber" placeholder="请输入终端编号"></el-input>
                  </el-form-item>
                  <el-form-item label="所属户号" prop="householdId" :rules="[{ required: true, message: '请选择所属户号', trigger: 'blur' }]">
                    <el-select v-model="deviceForm.householdId" placeholder="请选择所属户号">
                      <el-option
                        v-for="item in householdList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                  <el-button type="info" @click="addDeviceAccount('deviceForm')">确 定</el-button>
                </div>
              </el-dialog>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 右边组件2 -->
        <!-- <div v-else-if="isActive === 1">
          <h2>山西XX112用电企业</h2>
        </div> -->
        <!-- 右边组件3 -->
        <!-- <div v-else-if="isActive === 2">
          <h2>山西XX113用电企业</h2>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import config from '@/settings'
import {getToken} from '@/utils/auth'
import { separateObj } from '@/utils/index'
import { getDictMap } from "../../../../api/system/dictDetail";
import { getAllJob } from "../../../../api/system/job";
import { apiGetDeptExt, apiGetDeptExtFindByDeptId, apiGetDeptExtFindAll, apiUploadFileDeptExt, apiPutDeptExt } from "../../../../api/customerfiles/deptExt";
import { apiPostHousehold, apiDelHousehold, apiPutHousehold, apiGetHousehold, apiGetHouseholdFindAll } from "../../../../api/customerfiles/household";
import { apiGetTransformer, apiPostTransformer, apiPutTransformer, apiDelTransformer } from "../../../../api/customerfiles/transformer";
import { apiPostMiniUser, apiDelMiniUser, apiPutMiniUser } from "../../../../api/customerfiles/miniUser";
import { apiPostEquipment, apiDelEquipment, apiPutEquipment } from "../../../../api/customerfiles/equipment";

export default {
  data() {
    return {
      userInfo: null,
      userType: null,
      headerToken: { 'Authorization': getToken()},
      updateFileUrl: config.apiUrl + 'api/deptExt/updateFile',
      activeName: "one",
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      companyBaseId: '',
      companyBaseName: '',
      companyBaseVoltageLeavel: '',
      companyBaseContacts: '',
      companyBasePhone: '',
      legalPersonName: '', //法人姓名
      legalPersonIdNumber: '', //法人身份证
      socialCreditCode: '', //统一信用代码
      deptExtType: '', //企业类型
      companyBaseOpeningBank: '',
      companyBaseIdCardFront: '',
      companyBaseIdCardReverse: '',
      companyBaseBusinessLicense: '',
      newCompanyBaseOpeningBank: '',
      newCompanyBaseIdCardFront: '',
      newCompanyBaseIdCardReverse: '',
      newCompanyBaseBusinessLicense: '',
      bankDisabled: false,
      cardDisabled: false,
      businessLicenseDisabled: false,
      imageUrl: 'http://192.168.31.220:8061/file/bp_8f4bccc91182482aa8e84e061130bee8-2020060411425691.jpg',
      jobList: [],
      voltageLevelList: [],
      userTypeList: [],
      companyList: [],
      householdList: [],
      enabledList:[{value: '0', label: '不启用'},{value: '1', label: '启用'}],
      isActive: 0,
      deptId: 0,
      title:'',
      companyData1: {
        title: "",
        voltage: '',
        doorCount: 0,
        people: "",
        phone: '',
        area: "",
        baseMessage: {},
        programMessage: [],
        userMessage: [],
        transformerMessage: [],
        deviceMessage: []
      },
      programForm: {
        id: 0,
        deptId: 0,
        username: "",
        phone: "",
        jobId: "",
        enabled: ""
      },
      userForm: {
        id: 0,
        num: "",
        type: "",
        grade: ""
      },
      transformerForm: {
        id: 0,
        transformerName: "",
        transformerNumber: "",
        transformerCapacity: ""
      },
      deviceForm: {
        id: 0,
        equipmentId: "",
        defaultValue: "",
        equipmentNumber: "",
        householdId: ""
      }
    };
  },
  created() {
    this.userInfo = this.$store.state.user.user
    this.userType = this.$store.state.user.user.userType
    this.deptId = this.userType == 5 || this.userType == 1 ? this.userInfo.deptId : this.$route.query.deptId,

    this.getJob()
    this.getDeptExt()
    this.getVoltageLevel()
    this.getUserType()
    this.getHousehold()
  },
  methods: {
    getDeptExt(){
      console.log('companyData1')
      console.log(this.companyData1.transformerMessage)

      if(this.userType != 5 && this.userType != 1){
        apiGetDeptExtFindAll()
        .then(res => {
          let newDataList = [];
          if (res.length > 0) {
            res.forEach(element => {
              newDataList.push({ 
                deptId: element.deptId,
                companyName: element.name
              });
            });
          }
          this.companyList = newDataList;
          if (this.deptId == undefined || this.deptId == null || this.deptId == '') {
            this.isActive = newDataList[0].deptId;
            this.getDeptExtFindByDeptId(newDataList[0].deptId);
          }else{
            this.isActive = this.deptId;
            this.getDeptExtFindByDeptId(this.deptId);
          }
        })
        .catch(error => {
          console.log(error);
        });
      }else{
        this.getDeptExtFindByDeptId(this.deptId);
      }
    },
    getDeptExtFindByDeptId(deptId){
      apiGetDeptExtFindByDeptId(deptId)
      .then(res => {
        let newDataObj = {
          title: '',
          voltage: '',
          doorCount: 2,
          people: '',
          phone: '',
          area: "山西省晋中市",
          openingBankUrl: '',
          cardUrl: '',
          businessLicense: '',
          baseMessage: {},
          programMessage: [
            {
              id: 1,
              username: "张XX",
              jobId: "业务联系人",
              phone: 18288888888,
              wxId: "",
              enabled: 0
            },
            {
              id: 2,
              username: "张XX",
              jobId: "业务联系人",
              phone: 18288888888,
              wxId: "",
              enabled: 0
            },
            {
              id: 3,
              username: "张XX",
              jobId: "业务联系人",
              phone: 18288888888,
              wxId: "",
              enabled: 0
            },
            {
              id: 4,
              username: "张XX",
              jobId: "业务联系人",
              phone: 18288888888,
              wxId: "",
              enabled: 0
            }
          ],
          userMessage: [],
          transformerMessage: [
            {
              id: 1,
              transformerName: "变压器1",
              transformerNumber: "编号1",
              transformerCapacity: "容量1"
            },
            {
              id: 2,
              transformerName: "变压器2",
              transformerNumber: "编号2",
              transformerCapacity: "容量1"
            },
            {
              id: 3,
              transformerName: "变压器3",
              transformerNumber: "编号3",
              transformerCapacity: "容量1"
            },
            {
              id: 4,
              transformerName: "变压器4",
              transformerNumber: "编号4",
              transformerCapacity: "容量1"
            }
          ],
          deviceMessage: []
        }
        let dataList = res;
        this.companyBaseId = res.id;
        this.companyBaseName = res.name;
        this.companyBaseVoltageLeavel = res.voltageLeavel;
        this.companyBaseContacts = res.contacts;
        this.companyBasePhone = res.phone;
        this.legalPersonName = res.legalPersonName; //法人姓名
        this.legalPersonIdNumber = res.legalPersonIdNumber; //法人身份证
        this.socialCreditCode = res.socialCreditCode; //统一信用代码
        this.deptExtType = res.deptExtType; //企业类型
        if (res.openingBank != null && res.openingBank != '' && res.openingBank != undefined) {
          this.newCompanyBaseOpeningBank = res.openingBank;
          this.companyBaseOpeningBank = config.apiUrl + "file/" + res.openingBank;
        }else{
          this.newCompanyBaseOpeningBank = '';
          this.companyBaseOpeningBank = '';
        }
        if(res.idCardFront != null && res.idCardFront != '' && res.idCardFront != undefined){
          this.newCompanyBaseIdCardFront = res.idCardFront;
          this.companyBaseIdCardFront = config.apiUrl + "file/" + res.idCardFront;
        }else{
          this.newCompanyBaseIdCardFront = '';
          this.companyBaseIdCardFront = '';
        }
        if (res.idCardReverse != null && res.idCardReverse != '' && res.idCardReverse != undefined) {
          this.newCompanyBaseIdCardReverse = res.idCardReverse;
          this.companyBaseIdCardReverse = config.apiUrl + "file/" + res.idCardReverse;
        }else{
          this.newCompanyBaseIdCardReverse = '';
          this.companyBaseIdCardReverse = '';
        }
        if (res.businessLicense != null && res.businessLicense != '' && res.businessLicense != undefined) {
          this.newCompanyBaseBusinessLicense = res.businessLicense;
          this.companyBaseBusinessLicense = config.apiUrl + "file/" + res.businessLicense;
        }else{
          this.newCompanyBaseBusinessLicense = '';
          this.companyBaseBusinessLicense = '';
        }
        newDataObj.title = res.name;
        newDataObj.voltage = res.voltageLeavel;
        newDataObj.doorCount = res.households == null ? 0 : res.households.length;
        newDataObj.people = res.contacts;
        newDataObj.phone = res.phone;
        newDataObj.area = res.deptArea;
        newDataObj.openingBankUrl = res.openingBank;
        newDataObj.cardUrl = res.idCardFront;
        newDataObj.businessLicense = res.businessLicense;
        if (res.miniAppUsers != null) {
          let newMiniAppUsers = [];
          res.miniAppUsers.forEach(element => {
            newMiniAppUsers.push(element)
          });
          newDataObj.programMessage = newMiniAppUsers;
        }
        if (res.households != null) {
          let newUserMessage = [];
          res.households.forEach(element => {
            element.electricityTypeText = this.getElectricityTypeText(element.electricityType)
            element.voltageLevelText = this.getVoltageLevelText(element.voltageLevel)
            newUserMessage.push(element)
          });
          newDataObj.userMessage = newUserMessage;
        }
        if (res.equipments != null) {
          let newEquipments = [];
          res.equipments.forEach(element => {
            newEquipments.push(element)
          });
          newDataObj.deviceMessage = newEquipments;
        }
        newDataObj.transformerMessage = this.getTransformer(this.deptId)
        this.companyData1 = newDataObj;
      })
      .catch(error => {
        console.log(error);
      });
    },
    getTransformer(deptId){
      let newDataList = [];
      apiGetTransformer({deptId: deptId, page: 1, size: 999})
      .then(res => {
        if (res.content.length > 0) {
          res.content.forEach(element => {
            newDataList.push(element);
          });
        }
      })
      .catch(error => {
        console.log(error);
      });
      return newDataList;
    },
    editTransformer(row){
      if (this.$refs.transformerForm !== undefined) {
        this.$refs.transformerForm.resetFields();
      }
      if(row == ''){
        this.transformerForm = {
          id: 0,
          transformerName: "",
          transformerNumber: "",
          transformerCapacity: ""
        }
      }else{
        this.transformerForm = separateObj(row)
      }

      this.dialogFormVisible3 = true
    },
    delTransformer(data){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let delList = [];
          delList.push(data.id);
          apiDelTransformer(delList)
            .then(res => {
              this.getDeptExt()
            })
            .catch(error => {
              console.log(error);
            });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {        
        });
    },
    getVoltageLevel(){
      getDictMap('voltage_level')
      .then(res => {
        let newVoltageLevel = [];
        res.voltage_level.forEach(element => {
          newVoltageLevel.push({value: element.value, label: element.label})
        });
        this.voltageLevelList = newVoltageLevel;
      })
      .catch(error => {
        console.log(error);
      });
    },
    getJob(){      
      getAllJob()
      .then(res => {
        let newJobList = [];        
        res.content.forEach(element => {
          newJobList.push({value: element.id, label: element.name})
        });
        this.jobList = newJobList;
      })
      .catch(error => {
        console.log(error);
      });
    },
    getUserType(){
      getDictMap('electricity_type')
      .then(res => {
        let newUserType = [];
        res.electricity_type.forEach(element => {
          newUserType.push({value: element.value, label: element.label})
        });
        this.userTypeList = newUserType;
      })
      .catch(error => {
        console.log(error);
      });
    },
    getHousehold(){
      this.householdList = [];
      apiGetHouseholdFindAll({deptId: this.deptId})
      .then(res => {
        let newHouseholdList = [];        
        res.forEach(element => {
          newHouseholdList.push({value: element.id, label: element.householdNumber})
        });
        this.householdList = newHouseholdList;
      })
      .catch(error => {
        console.log(error);
      });
    },
    addHousehold(){
      if (this.$refs.programForm !== undefined) {
        this.programForm = {
          id: 0,
          username: "",
          phone: "",
          jobId: "",
          enabled: ""
        }
        this.$refs.programForm.resetFields();
      }
      this.dialogFormVisible1 = true;
    },
    editMiniUser(data){
      if (this.$refs.programForm !== undefined) {
        this.$refs.programForm.resetFields();
      }
      var dataObj = data
      this.programForm = separateObj(dataObj)
      this.programForm.enabled = data.enabled ? '1' : '0';
      this.dialogFormVisible1 = true;
    },
    delMiniUser(data){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let delList = [];
          delList.push(data.id);
          apiDelMiniUser(delList)
            .then(res => {
              this.getDeptExt()
            })
            .catch(error => {
              console.log(error);
            });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {        
        });
    },
    addMiniUser(){
      if (this.$refs.userForm !== undefined) {
        this.userForm = {
          id: 0,
          num: "",
          type: "",
          grade: ""
        }
        this.$refs.userForm.resetFields();
      }
      this.dialogFormVisible2 = true;
    },
    editHousehold(data){
      if (this.$refs.userForm !== undefined) {
        this.$refs.userForm.resetFields();
      }
      this.userForm = separateObj(data)
      this.dialogFormVisible2 = true;
    },
    delHousehold(data){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let delList = [];
          delList.push(data.id);
          apiDelHousehold(delList)
            .then(res => {
              this.getDeptExt()
            })
            .catch(error => {
              console.log(error);
            });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {        
        });
    },
    addEquipment(){
      this.getHousehold()
      if (this.$refs.deviceForm !== undefined) {
        this.deviceForm = {
          id: 0,
          equipmentId: "",
          defaultValue: "",
          equipmentNumber: "",
          householdId: ""
        }
        this.$refs.deviceForm.resetFields();
      }
      this.dialogFormVisible4 = true;
    },
    editEquipment(data){
      if (this.$refs.deviceForm !== undefined) {
        this.$refs.deviceForm.resetFields();
      }
      this.deviceForm = separateObj(data)
      this.dialogFormVisible4 = true;
    },
    delEquipment(data){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let delList = [];
          delList.push(data.id);
          apiDelEquipment(delList)
            .then(res => {
              this.getDeptExt()
            })
            .catch(error => {
              console.log(error);
            });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {        
        });
    },
    // 点击选择不同用电企业
    chooseCompany(companyId) {
      this.isActive = companyId;
      this.companyList.forEach(element => {
        if(element.deptId == companyId){
        this.title = element.companyName
        this.getDeptExtFindByDeptId(element.deptId)
        this.getHousehold()
        }
      });
      this.deptId = companyId;
      console.log('deptId')
      console.log(this.deptId)
      this.$router.push({path:'/customerfiles/customerInfo',query:{deptId:companyId}})
      //location.reload()
    },
    // 点击右边tabs 选项卡
    handleClick(tab, event) {},
    // 添加小程序账号
    addProgramAccount(formName) {
      this.programForm.deptId = this.deptId;
      let form = this.programForm
      let api = apiPostMiniUser
      if(form !== undefined && form.id !== 0){
        api = apiPutMiniUser
      } 
      this.$refs[formName].validate((valid) => {
          if (valid) {
            form.enabled = form.enabled == 1 ? true : false;
            api(form).then(res => {
              this.getDeptExt()
              this.$message({
                type: 'success',
                message: '执行成功!'
              });
              this.dialogFormVisible1 = false;
            })
            .catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 添加户号
    addUserAccount(formName) {
      let form = this.userForm
      let api = apiPostHousehold
      if(form !== undefined && form.id !== 0){
        api = apiPutHousehold
      } 
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userForm.deptId = this.deptId;
            api(form).then(res => {
              this.getDeptExt()
              this.$message({
                type: 'success',
                message: '执行成功!'
              });
              this.dialogFormVisible2 = false
            })
            .catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 添加变压器
    addTransformerAccount(formName) {
      let form = this.transformerForm
      let api = apiPostTransformer
      if(form !== undefined && form.id !== 0){
        api = apiPutTransformer
      } 
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.transformerForm.deptId = this.deptId;
            api(form).then(res => {
              this.getDeptExt()
              this.$message({
                type: 'success',
                message: '执行成功!'
              });
              this.dialogFormVisible3 = false;
            })
            .catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 添加终端设备
    addDeviceAccount(formName) {
      this.deviceForm.deptId = this.deptId;
      let form = this.deviceForm
      let api = apiPostEquipment
      if(form !== undefined && form.id !== 0){
        api = apiPutEquipment
      } 
      this.$refs[formName].validate((valid) => {
          if (valid) {
            api(form).then(res => {
              this.getDeptExt()
              this.$message({
                type: 'success',
                message: '执行成功!'
              });
              this.dialogFormVisible4 = false
            })
            .catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 跳转到实时数据
    realTimeDataClick(row) {
      this.$router.push({path:'./electricitysales/realTimeData',query:{deptId:row.deptId}})
    },
    // 获取用电类型描述
    getElectricityTypeText(electricityType){
      switch (electricityType) {
        case '1':
          return '大工业用电';
          break;
        case '2':
          return '一般工商业用电';
          break;
        case '3':
          return '居民生活用电';
          break;
        case '4':
          return '农业生产用电';
          break;
      }
    },
    // 获取电压等级描述
    getVoltageLevelText(VoltageLevel){
      switch (VoltageLevel) {
        case '1':
          return '10kv';
          break;
        case '2':
          return '35Kv';
          break;
        case '3':
          return '110kv';
          break;
        case '4':
          return '220Kv';
          break;
      }
    },
    submitCompanyBase(){
      let dataObj = { 
        id: this.companyBaseId, 
        name: this.companyBaseName, 
        //voltageLeavel: this.companyBaseVoltageLeavel,
        contacts: this.companyBaseContacts,
        phone: this.companyBasePhone,
        openingBank: this.newCompanyBaseOpeningBank,
        idCardFront: this.newCompanyBaseIdCardFront,
        idCardReverse: this.newCompanyBaseIdCardReverse,
        businessLicense: this.newCompanyBaseBusinessLicense, 
        
        legalPersonName: this.legalPersonName, //法人姓名
        legalPersonIdNumber: this.legalPersonIdNumber, //法人身份证
        socialCreditCode: this.socialCreditCode, //统一信用代码
        deptExtType: this.deptExtType //企业类型
      }
      console.log(JSON.stringify(dataObj))
      apiPutDeptExt(dataObj)
        .then(res => {
          this.getDeptExt()
          this.$message({
            type: 'success',
            message: '执行成功!'
          });
        })
        .catch(error => {
          console.log(error)
        })
    },
    bankHandleSuccess(res, file) {
      this.companyBaseOpeningBank = URL.createObjectURL(file.raw);
      this.newCompanyBaseOpeningBank = res;
    },
    cardFrontSuccess(res, file) {
      this.companyBaseIdCardFront = URL.createObjectURL(file.raw);
      this.newCompanyBaseIdCardFront = res;
    },
    cardReverseSuccess(res, file) {
      this.companyBaseIdCardReverse = URL.createObjectURL(file.raw);
      this.newCompanyBaseIdCardReverse = res;
    },
    licenseHandleSuccess(res, file) {
      this.companyBaseBusinessLicense = URL.createObjectURL(file.raw);
      this.newCompanyBaseBusinessLicense = res;
    },
    // 上传前格式和图片大小限制
    beforeAvatarUpload(file) {
      const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!type) {
        this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return type && isLt2M
    }
  }
};
</script>
<style lang="scss">
.active {
    background-color: rgb(14, 125, 98);
    border-color: rgb(14, 125, 98);
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
html,
body {
    height: 100%;
}
#chart_page {
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}
.left-company {
    height: calc(100vh - 150px);
    background: #e6f2f0;
    padding: 0 !important;
}
.right-content {
    height: 100%;
    background-color: #fff;
}
.all-client {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: rgb(14, 125, 98);
}
.company-item {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    left: 5px;
}
.active {
    border: none;
    background-color: #fff;
}
.company-name {
    margin: 0 0 0 20px;
    color: rgb(14, 125, 98);
}
.top-message {
    margin: 20px 0 0 20px;
    color: #999;
    font-size: 14px;
}
.detail-message {
    color: #000;
    margin-left: 10px;
}
.el-tabs {
    margin: 30px 0 0 20px;
}
.el-tabs__item:hover {
    color: rgb(14, 125, 98);
}
.el-tabs__item.is-active {
    color: rgb(14, 125, 98);
}
.el-tabs__active-bar {
    height: 3px;
    background-color: rgb(14, 125, 98);
}
.company-info {
    margin: 0 0 0 0;
    font-size: 12px;
    color: #909399;
    font-weight: bold;
}
.company-info span{
  font-weight: normal;
  float: right;
  width: 100px;
  color: #606266;
  text-align: left;
}
.el-table {
    margin-top: 10px;
}
.el-input__inner {
    width: 200px;
}
.info-item {
    margin-top: 15px;
    width: 100%;
    /* overflow: hidden; */
}
.margin-left-100{
  margin-left: 100px;
}
.info-item .el-button span{
  color:#fff;
  text-align: center;
}
.img{
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid #ccc;
}
.el-upload--picture-card{
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.el-upload-list--picture-card .el-upload-list__item{
  width: 100px;
  height: 100px;
}
.upload_btn{
  width: 100px;
}
.upload_btn span{
  width: 100%;
}
</style>